<template>
	<view class="main">
		<uni-nav-bar fixed left-icon="back" title="绑定银行卡" color="#333333" backgroundColor="#FFFFFF" :border="false" statusBar
			@clickLeft="goReturn" ></uni-nav-bar>
		
		<view class="form-data">
			<uni-forms ref="form" :modelValue="formData" :rules="rules" label-position="top" label-width="20">
				<uni-forms-item label="银行" name="bank_id">
					<uni-data-select v-model="formData.bank_id" :localdata="banks" @change="change" placeholder="请选择银行" :clear="isEdit"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="开户行" name="bank_address">
					<uni-easyinput type="text" v-model="formData.bank_address" placeholder="请输入开户行" :clearable="isEdit"/>
				</uni-forms-item>
				<uni-forms-item label="姓名" name="username">
					<uni-easyinput type="text"  v-model="formData.username" placeholder="请输入姓名" :clearable="isEdit"/>
				</uni-forms-item>
				<uni-forms-item label="银行卡号" name="bank_num">
					<uni-easyinput type="text"  v-model="formData.bank_num" placeholder="请输入银行卡号" :clearable="isEdit"/>
				</uni-forms-item>
			</uni-forms>
			<view class="submit">
				<button class="btn" type="default" v-show="isEdit" @click="submit">立即绑定</button>
			</view>
		</view>
		
		 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isEdit:false,
				 // 表单数据
				 formData: {
					 bank_id:'',
					 bank_address:'',
					 bank_num:'',
				 	 username: ''
				 },
				 rules: {
				 	bank_id: {
				 		rules: [
				 			{required: true,errorMessage: '请选择银行'}
				 		]
				 	},
					bank_address: {
						rules: [
							{required: true,errorMessage: '请输入开户行'}
						]
					},
					bank_num: {
						rules: [
							{required: true,errorMessage: '请输入银行卡号'}
						]
					},
				 	username: {
				 		rules: [
				 			{required: true,errorMessage: '请输入姓名'}
				 		]
				 	}
				 },
				 banks:[
				   { value: 0, text: "中国银行" },
				   { value: 1, text: "建设银行" },
				   { value: 2, text: "交通银行" }
				 ]
			}
		},
		methods: {
			getBank(){
				this.$http.get('/v1/get_my_bank_list',res => {
					var arr = res.data.list
					if(arr && arr.length > 0){
						this.formData = arr [0]
					}else{
						this.isEdit = true
					}
				})
			},
			edit(){
				this.isEdit = true
			},
			queryBanks(){//查询银行列表
				this.$http.get('/v1/get_bank_list',res => {
					this.banks = res.data.map(item => {
						return {
							text:item.bank_name,
							value: item.id + ""
						}
					})
				})
			},
			// 触发提交表单
			submit() {
				this.$refs.form.validate().then(res=>{
					this.$http.post('/v1/bank_auth',this.formData,res => {
						if(res.code == 200){
							uni.showToast({
								 icon: 'none',
								 title: '绑定成功',
							})
							this.isEdit = false
						}
					})
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			},
			change(e) {
				console.log("e:", e);
			},
			// 返回
			goReturn() {
				uni.navigateBack({
					delta: 1
				});
			}
		},
		onLoad() {
			this.queryBanks()
			this.getBank()
		}
	}
</script>

<style lang="scss">
	 .form-data{
		 /deep/.uni-select{
			 border: none;
			 border-bottom: 1px solid #f2f2f2;
		 }
		 /deep/.uni-easyinput__content{
			border: none;
			border-bottom: 1px solid #f2f2f2;
		 }
		 /deep/.uni-forms-item__label{
			 font-size: 32upx;
			 color: #333333;
			 font-weight: 600;
		 }
		 .submit{
			 width: 100%;
			 margin-top: 150upx;
			 .btn{
				 width: 400upx;
				 height: 80upx;
				 line-height: 80upx;
				 border-radius: 40upx;
			 }
		 }
	 }
</style>
